<template>
  <div class="listview">
    <div class="header">
      <SreachView :title="title"></SreachView>
    </div>
    <div class="main">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="(item,index) in items" :key="item.id" :title="item.name" @click="onadd(index)"/>
      </van-sidebar>
      <div class="main-content">
        <van-tabs v-model="active" color="green" title-active-color="green" animated sticky>
          <van-tab v-for="item in list" :key="item.id" :title="item.name">
            <p class="text">{{item.name}}</p>
            <p v-for="item in item.products" :key="item.id">
              <CardItem :item1="item"></CardItem>
            </p>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import SreachView from '../components/SreachView.vue'
import CardItem from '../components/CardItem.vue'
export default {
    name:"ListView",
    components:{
      SreachView,
      CardItem
    },
    data(){
      return {
        active:0,
        activeKey: 0,
        items:[],
        list:[],
        a:0,
        title:"请输入商品名称",
      }
    },
    methods: {
      async onadd(index) {
        console.log(index);
        // console.log(this.activeKey)
        this.a=index+1;
        let str= index+1>=10?"lk0"+this.a:"lk00"+this.a
        // console.log(a+".json");
        let arr= await this.$http.getListItem1(str+".json");
        this.list=arr.data.data.cate;
        console.log(arr);
      },
      
    },
    async created(){
        let res=await this.$http.getListItem();
        this.items=res.data.data.cate;
        let b=parseInt(this.$route.query.name)+1;
        let str=b>=10?"lk0"+b:"lk00"+b
        let res1=null;
        if(!this.$route.query.name){
          res1=await this.$http.getListItem1("lk001.json");
          this.list=res1.data.data.cate;
        }else{
          this.activeKey=this.$route.query.name;
          this.a=this.$route.query.name;
          res1=await this.$http.getListItem1(str+".json");
          this.list=res1.data.data.cate;     
        }       
    }
}
</script>

<style lang="scss" scoped> 
.listview{
  font-size:0.16rem; 
  .header{
    padding-top:.35rem;
    width: 90%;
    margin:0 auto;
  }
  .main{
    height: 100vh;
    margin-top:.3rem;
    display:flex;
    justify-content: space-between;
    .tablist{
      display:flex;
      justify-content: space-around;
      h3{
        font-size:.3rem;
      }
    }
    .main-content{
      width:calc(100vw - 80px);
      height: 100%;
      .van-tab__pane-wrapper{
        height: 90vh;
        overflow:auto;
        .text{
          height: 0.55rem;
          text-indent:.4rem;
          background:#ccc;
          line-height:.55rem;
        }
      } 
    }
  }
}
  
</style>